<template>
  <div>
    <div class="detial-body">
      <div class="index-memo-top">
        <img :src="info.index_img" class="index-memo-cover" />
        <!-- <el-image
                  :src="info.index_img"
                  fit="cover"
                  class="index-memo-cover"
                ></el-image> -->
        <div class="index-memo-top-right_body">
          <div class="index-memo-top-right">
            <div class="index-memo-title">
              <span>{{ info.name }}</span>
              <span class="index-memo-title-red index-memo-title-dian" v-if="info.type_name">·</span>
              <span class="index-memo-title-red" v-if="info.type_name">{{
                info.type_name
              }}</span>
              <!--                            {{-->
              <!--                                id == 1-->
              <!--                                    ? "高空版"-->
              <!--                                    : id == 2-->
              <!--                                        ? "非高空版"-->
              <!--                                        : id == 4-->
              <!--                                            ? "高空版"-->
              <!--                                            : ""-->
              <!--                            }}-->
            </div>
            <div class="index-memo-brief" v-for="item in info.brief" :key="item.id">
              <img v-if="item.type == 1" src="../../assets/img/03.png" class="index-memo-brief-icon" />
              <img v-if="item.type == 0" src="../../assets/img/02.png" class="index-memo-brief-icon" />
              <div class="index-memo-brief-txt">
                {{ item.content }}
              </div>
            </div>
            <!-- <div class="index-memo-brief">
                          <img
                            src="https://jy-yyzj.oss-cn-shanghai.aliyuncs.com/jdbx/index-down-icon.png"
                            class="index-memo-brief-icon"
                          /> -->
            <!-- <div class="index-memo-brief-txt" v-if="id == 1">
                            医疗费用最高达20万元/人，住院期间补贴100元/天
                          </div>
                          <div class="index-memo-brief-txt" v-else>医疗高达15万/人</div> -->
          </div>
          <!-- <div class="index-memo-brief">
                        <img
                          src="https://jy-yyzj.oss-cn-shanghai.aliyuncs.com/jdbx/index-down-icon.png"
                          class="index-memo-brief-icon"
                        />
                        <div class="index-memo-brief-txt" v-if="id == 1">
                          保障作业现场第三方责任及新机完工
                        </div>
                        <div class="index-memo-brief-txt" v-else>
                          保作业现场第三方人伤和物损责任（限家用场所）
                        </div>
                      </div> -->
          <div class="index-memo-bottom" style="margin-left: 20px">
            <div class="index-card-footer-btn index-card-footer-btn-red index-memo-bottom-text"
              style="margin-left: 0; border-radius: 22px" @click="toForm()">
              <div>立即投保</div>
            </div>
          </div>
        </div>
      </div>
      <!-- tab-->
      <div class="detail-tab">
        <div @click="changeTab(key)" :class="key == tab_index ? 'detail-tab-item active' : 'detail-tab-item'
          " v-for="(item, key) in tabs" :key="'tab' + key">
          {{ item }}
        </div>
        <div class="detail-tab-line" :style="{
          left: tab_index * 160 + 'px',
        }"></div>
      </div>
      <div v-if="tab_index == 0">
        <div class="type_btn_body" v-if="info.select_list.length != 0">
          <div class="type_btn" v-for="(item, index) in info.select_list" :key="index"
            :class="item.chooseTrue ? 'active_btn' : ''" @click="changeBtn(index)">
            {{ item.name }}
          </div>
        </div>
        <div class="detail-table">
          <div class="detail-table-item detail-table-item-bl" style="flex: 2.3">
            <div class="detail-tab-item-lineGF detail-tab-item-headGF">
              保障方案
            </div>
            <div class="detail-tab-item-lineGF">
              <div class="detail-tab-item-bgGF">
                <div class="detail-tab-item-bg_top">
                  平安产险意外伤害保险(C款)
                </div>
                <div class="detail-tab-item-bg_bottom">意外伤残身故和残疾</div>
              </div>
            </div>
            <div class="detail-tab-item-lineGF">
              <div class="detail-tab-item-bgGF">
                <div class="detail-tab-item-bg_top">
                  平安产险附加意外伤害医疗费用补偿保险
                </div>
                <div class="detail-tab-item-bg_bottom">意外住院和门急诊</div>
              </div>
            </div>
            <div class="detail-tab-item-lineGF">
              <div class="detail-tab-item-bgGF">
                <div class="detail-tab-item-bg_top">
                  平安产险附加意外伤害住院津贴保险
                </div>
                <div class="detail-tab-item-bg_bottom">意外住院津贴</div>
              </div>
            </div>
            <div class="detail-tab-item-lineGF">
              <div class="detail-tab-item-bgGF">
                <div class="detail-tab-item-bg_top" style="
                    height: 55px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                  ">
                  保费
                </div>
              </div>
            </div>
          </div>
          <div class="detail-table-item detail-table-item-hover" v-for="(item, index) in chooseDta.fananlist"
            :key="index">
            <div class="detail-tab-item-lineGF detail-tab-item-headGF">
              <!-- 表头 -->
              {{ chooseDta.fanan[item].name }}
            </div>
            <div class="detail-tab-item-lineGF">
              {{ chooseDta.fanan[item].be.name }}
            </div>
            <div class="detail-tab-item-lineGF">
              {{ chooseDta.fanan[item].ylfy.name }}
            </div>
            <div class="detail-tab-item-lineGF">
              {{ chooseDta.fanan[item].ywjt.name }}
            </div>
            <div class="detail-tab-item-lineGF">
              {{ chooseDta.fanan[item].price }}元
            </div>
          </div>
        </div>
        <div class="detail-table-p">
          <div class="detail-table-p-left">赔偿标准</div>
          <div class="detail-table-p-right">
            <div class="detail-table-p-txt-one">
              <span>意外伤害住院津贴：意外伤害住院津贴日额为100元/天，免赔3天，单次事故限90天，全年累计以180天为限</span>
            </div>
            <div class="detail-table-p-txt">
              <span>医疗费用扣除100元部分按100%的比例给付意外伤害医疗保险金</span>
            </div>
            <div class="detail-table-p-table">
              <div class="detail-table-p-table-item1 blckColor">伤残等级</div>
              <div class="detail-table-p-table-item blckColor">10级</div>
              <div class="detail-table-p-table-item blckColor">9级</div>
              <div class="detail-table-p-table-item blckColor">8级</div>
              <div class="detail-table-p-table-item blckColor">7级</div>
              <div class="detail-table-p-table-item blckColor">6级</div>
              <div class="detail-table-p-table-item blckColor">5级</div>
              <div class="detail-table-p-table-item blckColor">4级</div>
              <div class="detail-table-p-table-item blckColor">3级</div>
              <div class="detail-table-p-table-item blckColor">2级</div>
              <div class="detail-table-p-table-item blckColor">1级</div>
            </div>

            <div class="detail-table-p-table detail-table-p-table-nb">
              <div class="detail-table-p-table-item1">赔偿限额比例</div>
              <div class="detail-table-p-table-item">10%</div>
              <div class="detail-table-p-table-item">20%</div>
              <div class="detail-table-p-table-item">30%</div>
              <div class="detail-table-p-table-item">40%</div>
              <div class="detail-table-p-table-item">50%</div>
              <div class="detail-table-p-table-item">60%</div>
              <div class="detail-table-p-table-item">70%</div>
              <div class="detail-table-p-table-item">80%</div>
              <div class="detail-table-p-table-item">90%</div>
              <div class="detail-table-p-table-item">100%</div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="tab_index == 1">
        <div class="detail-rich" v-html="richFrom.notice"></div>
      </div>
      <div v-if="tab_index == 2">
        <div class="detail-rich" v-html="richFrom.inform"></div>
      </div>
      <div v-if="tab_index == 3">
        <div class="detail-rich" v-html="richFrom.contributing"></div>
      </div>
      <div v-if="tab_index == 4">
        <div class="detail-rich" v-html="richFrom.exempt"></div>
      </div>
      <div v-if="tab_index == 5">
        <div class="detail-rich" v-html="richFrom.problem"></div>
      </div>
    </div>
    <el-dialog title="重要提示" :visible.sync="promptDia" width="451px" custom-class="promptDia_c">
      <div class="prompt_body">
        <div class="checkbox_body">
          <el-checkbox v-model="prompFrom.checkbox"></el-checkbox>
          <div class="checkbox_box">
            我已知晓：工单本身的机器的损失与特定财产不属保障范围；
          </div>
        </div>
        <div class="checkbox_body">
          <el-checkbox v-model="prompFrom.checkbox2"></el-checkbox>
          <div class="checkbox_box2">
            我已知晓：每次事故物损绝对
            <span class="checkbox_box2_span">免赔500</span>元；
          </div>
        </div>
      </div>
      <div class="prompt_btn">
        <div class="btn_customer">联系客服</div>
        <div class="btn_customer2" @click="toFormEnd">继续投保</div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      btn_choose: true,
      prompFrom: {
        checkbox: false,
        checkbox2: false,
      },
      promptDia: false,
      tabs: [
        "保险详情",
        "投保须知",
        "客户公告",
        "特别约定",
        "责任免除",
        "常见问题",
      ],
      tab_index: 0,
      id: 0,
      info: {},
      richFrom: "",
      chooseDta: {},
    };
  },
  mounted() {
    this.id = this.$route.params.id;
    console.log(this.id);
    this.getData();
    this.getRich1();
    // this.open();
  },
  methods: {
    changeBtn(index) {
      this.info.select_list.forEach((item) => {
        item.chooseTrue = false;
      });
      this.info.select_list[index].chooseTrue = true;
      this.chooseDta = this.info[this.info.select_list[index].value];
      this.$forceUpdate();
    },
    open() {
      if (this.$store.state.loginState == false) {
        // 查看方案-登录判断
        // return this.$router.push({
        //   path: "/index/login/login",
        // });
      } else {
        this.ajaxs("order/getNoNay", {
          data: { id: this.id },
          success: (res) => {
            if (res.code) {
              this.$confirm("您有待支付订单知否跳转查看？\n", "重要提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
              })
                .then(() => {
                  this.$router.push({
                    path: "/index/order/list/2",
                  });
                })
                .catch(() => { });
            }
          },
        });
      }
    },
    toForm() {
      if (this.$store.state.loginState == false) {
        // 查看方案-登录判断
        return this.$router.push({
          path: "/index/login/login",
        });
      } else {
        // this.promptDia=true
        this.$alert(
          "尊敬的客户，您即将进入平安保险的产品投保流程。根据银保监会[2020] 26号的监管规定，为了维护您的权益，您在投保过程中的完整操作轨迹将被记录，请您仔细阅读条款、责任免除、特别约定等内容。\n",
          "重要提示",
          {
            confirmButtonText: "确定",
            callback: (action) => {
              if (action == "confirm") {
                if (this.$store.state.loginState == false) {
                  return this.$router.push({
                    path: "/index/login/login",
                  });
                }
                this.$router.push({
                  path: "/index/index/formGF/" + this.id,
                });
              }
            },
          }
        );
      }
    },
    toFormEnd() {
      this.$router.push({
        path: "/index/index/form/" + this.id,
      });
    },
    getRich1() {
      this.ajaxs("index/getDoc", {
        data: {
          id: 6,
        },
        success: (res) => {
          this.richFrom = res.msg;
        },
      });
    },
    getData() {
      this.ajaxs("index/detail", {
        data: {
          id: this.id,
        },
        success: (res) => {
          this.info = res.msg;
          // window.document.title=this.info.name
          this.info.select_list[0].chooseTrue = true;
          this.chooseDta = this.info[this.info.select_list[0].value];
        },
      });
    },
    changeTab(index) {
      this.tab_index = index;
    },
  },
};
</script>

<style scoped>
@import "../../assets/css/index/indexGF.css";
@import "../../assets/css/index/detailGF.css";

/deep/ .promptDia_c {
  border-radius: 10px !important;
  margin-top: 30vh !important;
}

/deep/ .el-dialog__body {
  padding: 0;
}

/deep/ .el-dialog__header {
  background-color: #f8f8f8;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.prompt_btn {
  width: 100%;
  height: 20px;

  display: flex;
}

.btn_customer {
  border-bottom-left-radius: 10px;
  width: 50%;
  height: 44px;
  background-color: #e8f2ff;
  color: #3f6ff8;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  cursor: pointer;
}

.btn_customer2 {
  width: 50%;
  height: 44px;
  background-color: #3f6ff8;
  border-bottom-right-radius: 10px;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  cursor: pointer;
}

.prompt_body {
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.checkbox_body {
  display: flex;
  align-items: flex-start;
  margin-top: 10px;

  .checkbox_box {
    height: 36px;
    margin-left: 10px;
    width: 361px;
    word-wrap: break-word;
    white-space: normal;
    font-size: 15px;
    line-height: 18px;
    font-weight: 400;
    color: #000000;
  }

  .checkbox_box2 {
    height: 18px;
    margin-left: 10px;
    font-size: 15px;
    color: #000000;
    line-height: 18px;
  }

  .checkbox_box2_span {
    color: #f95d4a;
  }
}
</style>
